<template>
  <div class="login">
    <div class="back">
      <div class="login_back">
        <div class="left">
          <ul>
            <li>雪月</li>
            <li>
              <div>后台管理系统</div>
              <div>Background management system</div>
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="right-top">
            <ul>
              <li>
                <i>SIGN IN</i>
                <a>登录</a>
              </li>
            </ul>
          </div>
          <div class="right-bottom">
            <el-form
              :rules="rules"
              style="width: 300px"
              label-width="30px"
              size="medium "
              :model="formObj"
              ref="loginform"
            >
              <el-form-item prop="username">
                <el-input
                  type="text"
                  placeholder=" 请输入用户名"
                  v-model="formObj.username"
                  ><i
                    slot="prefix"
                    class="el-icon-user-solid"
                    style="font-size: 22px"
                    >|</i
                  ></el-input
                >
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  placeholder=" 请输入密码"
                  v-model="formObj.password"
                  :show-password="true"
                  ><i slot="prefix" class="el-icon-lock" style="font-size: 22px"
                    >|</i
                  ></el-input
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="gupd()" style="width: 100%">
                  登录
                </el-button>
              </el-form-item>
              <el-form-item>
                <template>
                  <!-- `checked` 为 true 或 false -->
                  <el-checkbox
                    v-model="formObj.isAout"
                    style="font-style: italic; color: #b0b0ad"
                    >保持登录状态</el-checkbox
                  >
                </template>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入登录的api
import { api_login } from "../../api/user.js";

export default {
  data() {
    // 校验用户名
    const vliusername = (rule, value, callback) => {
      let reg = /^[a-z0-9\u4e00-\u9fa5]{3,12}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入3到12位的用户名"));
      }
    };
    // 校验密码
    const vlipassword = (rule, value, callback) => {
      let reg = /^[a-z0-9]{3,12}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入3到12位密码"));
      }
    };

    return {
      formObj: {
        username: "",
        password: "",
        isAout: false,
      },
      // 定义校验对象
      rules: {
        username: [{ validator: vliusername, trigger: "blur" }],
        password: [{ validator: vlipassword, trigger: "blur" }],
      },
    };
  },

  methods: {
    gupd() {
      this.$refs.loginform.validate(async (b) => {
        if (b) {
          let rst = await api_login(this.formObj);
          let { data, meta } = rst;
          let { msg, status } = meta;
          if (status == 200) {
            if (this.formObj.isAout) {
              // 将当前的用户信息存入到本地存储中
              this.$local.set("formObj", this.formObj);
            }
            //  将个人登录信息以及token存入到本地
            this.$local.set("user_login", data);
            this.$router.replace("/users/users");
          } else {
            this.$message.error(msg);
          }
          console.log(rst);
        }
      });
    },
    // 在实列被创建之后触发
    created() {
      if (this.$local.isKey("formObj")) {
        // 获取本地的账号和密码
        let formObj = this.$local.get("formObj");
        // 然后对formObj中的账号和密码赋值
        this.formObj.username = formObj.username;
        this.formObj.password = formObj.password;
        // 调用登录方法实现登录功能
        this.login();
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/login.less);
</style>